{extend name='admin@public/content'}
{block name="button"}
<button class='layui-btn layui-btn-sm layui-btn-primary' id="checkbox">全选/反选</button>
<button data-update data-value="{$list.id}" data-field='delete' data-action='{:url("$classuri/detImg")}' class='layui-btn layui-btn-sm layui-btn-primary'>批量删除</button>
{/block}
{block name='content'}
<a data-open='{:url("$classuri/edit")}?id={$list.id}' class="layui-btn menu-submit">店铺编辑</a>
<input hidden id="id" value="{$list.id}">
<div id="news_box">
    <?php if(!empty($list['list'])){?>
        {foreach $list['list'] as $vo}
            <div class="news_item">
                <!--<div class='news_tools hide'>-->
                    <!--<a data-open='{:url("edit")}?id={$vo.id}' href='javascript:void(0)'>编辑</a>-->
                    <!--<a data-open='{:url("edit")}?id={$vo.id}' data-news-del="{$vo.id}" href='javascript:void(0)'>删除</a>-->
                <!--</div>-->
                <div data-tips-image='{$vo.picurl}' class='news_articel_item' style='background-image:url("{$vo.picurl}");width: 320px;height: 320px'>
                </div>
                <div class="hr-line-dashed"></div>
                <td class='list-table-check-td think-checkbox'>
                    <input class="list-check-box" value='{$vo.id}' type='checkbox'/>
                </td>
            </div>
        {/foreach}
    <?php }?>
    <div class="news_item news_articel_item">
        <div class="row">
            <div class="layui-upload-list ">
                <div style="min-height:1px;line-height:160px;text-align:center;position:relative;" ontouchstart="">
                    <div class="cover-wrap" style="display:none;position:fixed;left:0;top:0;width:100%;height:100%;background: rgba(0, 0, 0, 0.4);z-index: 10000000;text-align:center;">
                        <div class="" style="width:900px;height:600px;margin:100px auto;background-color:#FFFFFF;overflow: hidden;border-radius:4px;">
                            <div id="clipArea" style="margin:10px;height: 520px;"></div>
                            <div class="" style="height:56px;line-height:36px;text-align: center;padding-top:8px;">
                                <input id="clipBtn" style="width:120px;height: 36px;border-radius: 4px;background-color:#ff8a00;color: #FFFFFF;font-size: 14px;text-align: center;line-height: 36px;outline: none;" value="保存封面">
                            </div>
                        </div>
                    </div>
                    <input id="view"  style="width:320px;height:320px;" title="请上传 750*200 的封面图片">
                    <div style="height:10px;"></div>
                    <div class="" style="width:140px;height:32px;border-radius: 4px;background-color:#ff8a00;color: #FFFFFF;font-size: 14px;text-align:center;line-height:32px;outline:none;margin-left:37px;position:relative;">
                        点击上传封面图
                        <input type="file" id="file" style="cursor:pointer;opacity:0;filter:alpha(opacity=0);width:100%;height:100%;position:absolute;top:0;left:0;">
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div style="clear:both"></div>

    {if empty($list)}
    <p class="help-block text-center well">没 有 记 录 哦！</p>
    {/if}
</div>
{if isset($page)}<p>{$page|raw}</p>{/if}

{/block}

{block name='script'}
<script>

    $('body').on('mouseenter', '.news_item', function () {
        $(this).find('.news_tools').removeClass('hide');
    }).on('mouseleave', '.news_item', function () {
        $(this).find('.news_tools').addClass('hide');
    });

    require(['jquery.masonry'], function (Masonry) {
        var container = document.querySelector('#news_box');
        var msnry = new Masonry(container, {itemSelector: '.news_item', columnWidth: 0});
        msnry.layout();
        $('body').on('click', '[data-news-del]', function () {
            var self = this;
            var dialogIndex = $.msg.confirm('确定要删除图文吗？', function () {
                $.form.load('{:url("del")}', {
                    field: 'delete',
                    value: 0,
                    id: self.getAttribute('data-news-del')
                }, 'post', function (ret) {
                    if (ret.code) {
                        $(self).parents('.news_item').remove();
                        return $.msg.success(ret.msg), msnry.layout(), false;
                    }
                    return $.msg.error(ret.msg), false;
                });
                $.msg.close(dialogIndex);
            });
        });
    });
    var isCheckAll = false;
    $('#checkbox').on('click',function () {
        swapCheck();
    })

    function swapCheck() {
        if (isCheckAll) {
            $("input[type='checkbox']").each(function() {
                this.checked = false;
            });
            isCheckAll = false;
        } else {
            $("input[type='checkbox']").each(function() {
                this.checked = true;
            });
            isCheckAll = true;
        }
    }

    $(function () {
        var id = $('#id').val();
        //图片裁剪上传
        var clipArea = new bjj.PhotoClip("#clipArea", {
            size: [320, 320],// 截取框的宽和高组成的数组。默认值为[260,260]
            outputSize: [320, 320], // 输出图像的宽和高组成的数组。默认值为[0,0]，表示输出图像原始大小
            //outputType: "jpg", // 指定输出图片的类型，可选 "jpg" 和 "png" 两种种类型，默认为 "jpg"
            file: "#file", // 上传图片的<input type="file">控件的选择器或者DOM对象
            view: "#view", // 显示截取后图像的容器的选择器或者DOM对象
            ok: "#clipBtn", // 确认截图按钮的选择器或者DOM对象
            loadStart: function() {
                // 开始加载的回调函数。this指向 fileReader 对象，并将正在加载的 file 对象作为参数传入
                $('.cover-wrap').fadeIn();
                console.log('照片读取中');
            },
            loadComplete: function() {
                // 加载完成的回调函数。this指向图片对象，并将图片地址作为参数传入
                layer.msg("照片读取完成");

            },
            //loadError: function(event) {}, // 加载失败的回调函数。this指向 fileReader 对象，并将错误事件的 event 对象作为参数传入
            clipFinish: function(dataURL) {
                // 裁剪完成的回调函数。this指向图片对象，会将裁剪出的图像数据DataURL作为参数传入
                $('.cover-wrap').fadeOut();
                $('#view').css('background-size','100% 100%');
                //图片上传 base64

                $.ajax({
                    url: '/admin/adminoss/index',
                    type: 'POST',
                    data: {'dataURL':dataURL,id:id},                    // 上传formdata封装的数据
                    success:function (data) {           //成功回调
                        if(data.id !=''){
                            $('#img').val(data.id);
                            layer.msg('上传成功');
                            window.location.reload()
                        }else{
                            layer.msg('上传失败，请联系管理员');
                        }
                    }
                });
            }
        });
    })

</script>
{/block}

{block name="style"}
<style>

    #news_box {
        position: relative;
    }

    #news_box .news_item {
        top: 0;
        left: 0;
        padding: 5px;
        margin: 10px;
        width: 320px;
        position: relative;
        border: 1px solid #ccc;
        box-sizing: content-box;
    }

    #news_box .news_item .news_articel_item {
        width: 100%;
        height: 150px;
        overflow: hidden;
        position: relative;
        background-size: 100%;
        background-position: center center;
    }

    #news_box .news_item .news_articel_item p {
        bottom: 0;
        width: 100%;
        color: #fff;
        padding: 5px;
        max-height: 5em;
        font-size: 12px;
        overflow: hidden;
        position: absolute;
        text-overflow: ellipsis;
        background: rgba(0, 0, 0, 0.7);
    }

    #news_box .news_item .news_articel_item.other {
        height: 50px;
        padding: 5px 0;
    }

    #news_box .news_item .news_articel_item .left-image {
        width: 50px;
        height: 50px;
        float: left;
        overflow: hidden;
        position: relative;
        background-size: 100%;
        background-position: center center;
    }

    #news_box .news_item .news_articel_item .right-text {
        float: left;
        width: 250px;
        padding-right: 10px;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    #news_box .news_item .hr-line-dashed:last-child {
        display: none
    }

    #news_box .hr-line-dashed {
        margin: 6px 0 1px 0
    }

    #news_box .news_tools {
        top: 0;
        z-index: 80;
        color: #fff;
        width: 312px;
        padding: 0 5px;
        margin-left: -6px;
        line-height: 38px;
        text-align: right;
        position: absolute;
        background: rgba(0, 0, 0, 0.7);
    }

    #news_box .news_tools a {
        color: #fff;
        margin-left: 10px
    }

</style>
{/block}